<template>
	<div class="left_content">
		<div class="center_c padding15 height1">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">项目动态</span>
				<img src="../assets/img/title_img.png" />
			</div>
			<div class="c_content_wrap">
				<div id="box">
					<ul id="con1" ref="con1" :class="{anim:animate==true}">
						<li v-for='item in project_dynamic'>
							<div class="">
								{{item.name}}
							</div>
							<div class="">
								{{item.dateStr}}
							</div>
						</li>
					</ul>
				</div>
				<!--<div v-for="item in project_dynamic" class="c_item">
					<div class="c_item_l dongtai_width">
						{{item.name}}
					</div>
					<div class="c_item_l">
						{{item.dateStr}}
					</div>
				</div>-->
			</div>
		</div>
		<div class="center_c padding15 height2" style="border-bottom: none;">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">项目关注度排行</span>
				<img src="../assets/img/title_img.png" />
				<div class="t_unit">
					（浏览量/次）
				</div>
			</div>
			<div class="c_content_wrap">
				<div v-for="item in project_focus_ranking" class="c_item">
					<div class="c_item_l">
						{{item.name}}
					</div>
					<div class="c_item_c">
						<div class="baifen" :style="{'width': item.baifen }"></div>
					</div>
					<div class="c_item_r">
						{{item.number}}
					</div>
				</div>
			</div>
		</div>
		<div class="center_c padding15 height2" style="border-top: none;">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">项目成交排行</span>
				<img src="../assets/img/title_img.png" />
				<div class="t_unit">
					（成交量/套）
				</div>
			</div>
			<div class="c_content_wrap">
				<div v-for="item in project_trade_ranking" class="c_item">
					<div class="c_item_l">
						{{item.name}}
					</div>
					<div class="c_item_c">
						<div class="baifen" :style="{'width': item.baifen }"></div>
					</div>
					<div class="c_item_r">
						{{item.number}}
					</div>
				</div>
			</div>
		</div>
		<div class="center_c padding15 height3">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">合作楼盘数量</span>
				<img src="../assets/img/title_img.png" />
			</div>
			<div class="c_content">
				<div id="main" class="cooperation">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts');
	import { projectDynamic, projectFocusRanking, projectTradeRanking, cooperationBuildingNum } from '@/request/api'; // 导入我们的api接口

	export default {
		name: 'right_content',

		data() {
			return {
				width: '200px',
				width1: '220px',
				width2: '250px',
				project_dynamic: {},
				project_focus: {},
				project_focus_ranking: {},
				project_trade_ranking: {},
				cooperation_building_num: {},
				animate: false,
				items: [ //消息列表对应的数组
					{
						name: "马云"
					},
					{
						name: "雷军"
					},
					{
						name: "王勤"
					}
				],
				myChart: {},
				option: {
					xAxis: {

						type: 'category',
						boundaryGap: false,
						data: [],
						axisLine: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#397CA8'
							},
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: '#397CA8'
							},
						}
					},
					series: [{
						data: [],
						type: 'line',
						areaStyle: {
							color: '#1676E9',
							opacity: 0.3
						},
						lineStyle: {
							color: '#397CA8',
						},
						smooth: true
					}],
					tooltip: {
						show: true,
					},
					textStyle: {
						color: '#fff'
					},
					grid: {
						left: 45,
						top: 20,
						right: 20,
						bottom: 30,
					},
					markline: {
						lineStyle: {
							color: 'red'
						}
					},
				}

			}
		},
		mounted() {
			this.initEcharts();

			// 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
			setInterval(this.scroll, 3000) 
		},
		created() {
			let that = this;
			
			
			that.ProjectDynamic();
			that.ProjectFocusRanking();
			that.ProjectTradeRanking();
			that.CooperationBuildingNum();

			setInterval(function() {
				that.ProjectDynamic();
				that.ProjectFocusRanking();
				that.ProjectTradeRanking();
				that.CooperationBuildingNum();
			}, 1000 * 60 * 60 * 1);
		},
		methods: {
			ProjectDynamic() {
				let that = this;
				projectDynamic({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.project_dynamic = res.data;
				})
			},

			ProjectFocusRanking() {
				let that = this;
				projectFocusRanking({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.project_focus_ranking = res.data;
					//算百分比
					var jishu;
					for(var i = 0; i < that.project_focus_ranking.length; i++) {
						//先转num
						that.project_focus_ranking[i].number = parseInt(that.project_focus_ranking[i].number);
						if(i == 0) {
							jishu = that.project_focus_ranking[i].number;
							that.project_focus_ranking[i].baifen = 1;
							that.project_focus_ranking[i].baifen *= 250;
							that.project_focus_ranking[i].baifen += 'px';
							continue;
						}
						that.project_focus_ranking[i].baifen = (that.project_focus_ranking[i].number) / jishu;

						that.project_focus_ranking[i].baifen *= 250;

						that.project_focus_ranking[i].baifen = parseInt(that.project_focus_ranking[i].baifen);
						that.project_focus_ranking[i].baifen += 'px';
					}

				})
			},

			ProjectTradeRanking() {
				let that = this;
				projectTradeRanking({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.project_trade_ranking = res.data;

					//算百分比
					var jishu;
					for(var i = 0; i < that.project_trade_ranking.length; i++) {
						//先转num
						that.project_trade_ranking[i].number = parseInt(that.project_trade_ranking[i].number);
						if(i == 0) {
							jishu = that.project_trade_ranking[i].number;
							that.project_trade_ranking[i].baifen = 1;
							that.project_trade_ranking[i].baifen *= 250;
							that.project_trade_ranking[i].baifen += 'px';
							continue;
						}
						that.project_trade_ranking[i].baifen = (that.project_trade_ranking[i].number) / jishu;

						that.project_trade_ranking[i].baifen *= 250;

						that.project_trade_ranking[i].baifen = parseInt(that.project_trade_ranking[i].baifen);
						that.project_trade_ranking[i].baifen += 'px';
					}
				})
			},

			CooperationBuildingNum() {
				let that = this;
				cooperationBuildingNum({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.cooperation_building_num = res.data;
					for(var i = 0; i < that.cooperation_building_num.xData.length; i++) {
						that.cooperation_building_num.xData[i] = that.cooperation_building_num.xData[i] + '月';
						that.cooperation_building_num.yData[i] = parseInt(that.cooperation_building_num.yData[i]);
					}
					that.option.xAxis.data = that.cooperation_building_num.xData;
					that.option.series[0].data = that.cooperation_building_num.yData;

					that.initEcharts();
				})
			},

			initEcharts() {
				let that = this;
				// 基于准备好的dom，初始化echarts实例
				that.myChart = echarts.init(document.getElementById('main'));
				// 绘制图表
				that.myChart.setOption(that.option);
			},
			
			scroll() {
				let con1 = this.$refs.con1;
				con1.style.marginTop = '-30px';
				this.animate = !this.animate;
				var that = this; 
				// 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
				setTimeout(function() {
					that.items.push(that.items[0]);
					that.items.shift();
					con1.style.marginTop = '0px';
					that.animate = !that.animate; 
					// 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
				}, 500)
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.height1 {
		height: 214px;
	}
	
	.height2 {
		height: 214px;
	}
	
	.height3 {
		height: 178px;
	}
	
	.left_content {
		color: #FFFFFF;
		width: 540px;
	}
	
	.padding15 {
		padding: 15px;
	}
	
	.main_fc {
		color: #00BEFF;
	}
	
	.up_c {
		width: 100%;
		height: 430px;
		border: 1px solid #00BEFF;
		position: relative;
		box-shadow: 0 0 60px 0px #0080CA inset;
		box-sizing: border-box;
	}
	
	.up_c_h {
		display: flex;
		justify-content: space-around;
	}
	
	.up_c_h .h_l {
		display: flex;
		align-items: center;
		background: url("../assets/img/title_bottom.png") no-repeat bottom center;
		background-size: 100%;
		padding-bottom: 10px;
	}
	
	.up_c_h .h_l_title {
		font-size: 14px;
		margin-right: 40px;
	}
	
	.up_c_h .h_l_num {
		font-size: 30px;
	}
	
	.border_image1 {
		position: absolute;
		left: -1px;
		top: -1px;
	}
	
	.border_image2 {
		position: absolute;
		right: -1px;
		top: -1px;
	}
	
	.border_image3 {
		position: absolute;
		right: -1px;
		bottom: -1px;
	}
	
	.border_image4 {
		position: absolute;
		left: -1px;
		bottom: -1px;
	}
	
	.center_c {
		width: 100%;
		/*height: 195px;*/
		border: 1px solid #00BEFF;
		position: relative;
		box-shadow: 0 0 60px 0px #0080CA inset;
		box-sizing: border-box;
	}
	
	.title_wrap {
		color: #2BFAFF;
		font-size: 18px;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.title_wrap .t_unit {
		position: absolute;
		right: -10px;
		top: 2px;
		font-size: 16px;
		color: #FFFFFF;
	}
	
	.title_wrap .t_text {
		margin-right: 20px;
	}
	
	.guanzhu_wrap {
		position: relative;
	}
	
	.guanzhu_item {
		width: 100px;
		height: 60px;
		background: url("../assets/img/guanzhu_bg.png") no-repeat center center;
		background-size: 100% 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	
	.guanzhu_item .money {
		font-size: 16px;
	}
	
	.guanzhu_item .g_name {
		font-size: 12px;
	}
	
	.position1 {
		position: absolute;
		left: 50%;
		margin-left: -50px;
		top: -20px;
	}
	
	.position2 {
		position: absolute;
		left: 50%;
		margin-left: -165px;
		top: 20px;
	}
	
	.position3 {
		position: absolute;
		left: 50%;
		margin-left: -98px;
		top: 80px;
	}
	
	.position4 {
		position: absolute;
		left: 50%;
		margin-left: 14px;
		top: 80px;
	}
	
	.position5 {
		position: absolute;
		left: 50%;
		margin-left: 70px;
		top: 20px;
	}
	
	.c_item {
		display: flex;
		padding: 8px 0;
		font-size: 14px;
		justify-content: space-between;
		align-items: center;
	}
	
	.c_item_l {
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.c_item_l .dongtai_width {
		/*width: ;*/
	}
	
	.c_item_c {
		width: 300px;
		/*height: 10px;*/
	}
	
	.baifen {
		width: 100%;
		height: 10px;
		background-image: linear-gradient(to right, #1676E9, #57C7ED);
		border-radius: 5px;
	}
	
	.cooperation {
		width: 500px;
		height: 140px;
	}
	
	.dongtai_width {
		width: 300px!important;
	}
	
	#box {
		/*width: 300px;*/
		height: 170px;
		line-height: 30px;
		overflow: hidden;
		transition: all 0.5s;
		padding-top: 10px;
	}
	
	.anim {
		transition: all 0.5s;
	}
	#con1 {
		padding-left: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#con1 li {
		list-style: none;
		line-height: 30px;
		height: 30px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}
</style>